<template>
  <nuxt-layout name="navigation">
    <div class="container">
      <el-row class="interface" :gutter="10">
        <el-col v-for="(item) in data" :xs="24" :sm="12" :md="6" :lg="6">
          <Card>
            <template #title>
              <span class="title">
                <span class="pointer">
                  <el-tooltip
                      effect="dark"
                      :content="item.apiName"
                      placement="top"
                  >
                    {{ item.apiName }}
                  </el-tooltip>
                </span>
                <span class="dict">
                  <Dict dict-type="nav_api_status" :value="item.apiStatus"/>
                </span>
              </span>
            </template>
            <div
                class="pointer api-content text-line-height fs-14"
                @click="jumpToUrl('/interface/' + item.id)"
                v-html="item.apiIntroduce"
            />
          </Card>
        </el-col>
      </el-row>
    </div>
  </nuxt-layout>
</template>

<script setup lang="ts">
import {Site} from "~/entity/site";
import {Response} from "~/entity/response";

const {apiApi} = useApi();
const data = ref<Site[]>([]);
const total = ref<number>(0);
const pageSize = ref(10);
const pageNum = ref(1);
const orderByColumn = ref("");
const isAsc = ref("");
const {setting} = useStoreToRefs(useStores.setting());

useHead({
  title: "接口列表" + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",") + ",接口列表"}
  ]
});

onBeforeMount(() => {
  getApiList();
});
const getApiList = () => {
  apiApi.getList({}, {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    orderByColumn: orderByColumn.value,
    isAsc: isAsc.value
  }).then((res: any) => {
    const {total: sum, rows}: Response = res;
    total.value = sum || 0;
    data.value = rows || [];
  });
};
const jumpToUrl = (url: string) => {
  navigateTo(url);
}
</script>

<style scoped lang="scss">
.container {
  .interface {
    margin-top: 10px;

    .title {
      display: flex;
      align-items: center;

      .dict {
        margin-left: 5px;
      }
    }

    .api-content {
      height: 140px;
      display: -webkit-box;
      -webkit-line-clamp: 7;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>